<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../elementui/vue.js"></script>
    <script src="../elementui/eui-2.13.js"></script>
    <link rel="stylesheet" href="../elementui/eui-index.css">
    <link rel="stylesheet" href="../elementui/index.css">
    <script src="../js/axios-0.18.0.js"></script>

    <style type="text/css">
        body{
            height: 100%;
            width: 100%;
            background-image: url("/img/photo4.jpg");
            background-repeat: no-repeat;
        }
        #app{
            width: 25%;
            text-align: center;
            padding: 143px 776px;


        }
        .el-form-item__label{
            font-size: 20px;
            color: darkslategray;
            font-style: italic;
            font-weight: bold;
            padding-right: 6px;
        }

    </style>

</head>
<body>
<div id="app">
    <el-form class="user-account-key" ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="原密码" prop="password">
            <el-input type="password" placeholder="请输入原密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" placeholder="请设置新密码" v-model="form.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newPassword2">
            <el-input type="password" placeholder="请确认新密码" v-model="form.newPassword2"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">保存</el-button>
            <el-button @click="$refs['form'].resetFields()">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>


    new Vue({
        el: "#app",
        data() {

            var validateNewPassword = (rule, value, callback) => {
                if (value === this.form.password) {
                    callback(new Error('新密码不能与原密码相同!'))
                } else {
                    callback()
                }
            };
            var validateNewPassword2 = (rule, value, callback) => {
                if (value !== this.form.newPassword) {
                    callback(new Error('与新密码不一致!'))
                } else {
                    callback()
                }
            };
            return{
                form:{},
                // password: "1234", newPassword: null, newPassword2: null
                rules: {
                    password: [
                        {required: true, message: '请输入原密码', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请设置新密码', trigger: 'blur'},
                        {validator: validateNewPassword, trigger: 'blur'}
                    ],
                    newPassword2: [
                        {required: true, message: '请确认新密码', trigger: 'blur'},
                        {validator: validateNewPassword2, trigger: 'blur'}
                    ]
                }
            }

            //此处即表单发送之前验证
            //此处即表单发送之前验证
        },

        created() {

        },
        methods: {
            onSubmit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        alert(this.form.newPassword)
                        // let {newPassword, password} = this.form
                        axios.post("/user/updatePassword.do",this.form).then((res)=>{
                            if (res.data.flag){
                                this.$message.success('密码已修改')
                                window.location.href="/login.html";
                            }
                        })

                        // updatePassword({newPassword, password}).then(() => {
                        //     this.$message.success('密码已修改')
                        // })
                    } else {
                        this.$message.error('请正确填写表单')
                        return false
                    }
                })
            },




        },
    });
</script>
</html>